<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../css/chat.css" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;

			}

			.footer-left {
				position: absolute;

				width: 60px;

				height: 52px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				font-size: 100px;
				vertical-align: middle;
				line-height: 100%;
				padding: 10px 4px;
			}

			.footer-center {
				height: 100%;
				padding: 5px 0px;
				margin-right: 0;

				margin-left: 50px;

			}
		</style>
	</head>

	<body contextmenu="return false;">

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<h1 class="mui-title title-color"><b id="chatting-nickname">聊 天</b></h1>
			<a id="openMenu" class="mui-icon mui-icon-right-nav mui-pull-right title-color">...</a>
		</header>

		<div id="msg-outter" class="mui-content">
			<div id='msg'>



			</div>
		</div>

		<footer>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<button type="button" class="mui-btn mui-btn-gray" id="send">发送</button>
			</label>
			<label for="" class="footer-left">
				<button type="button" class="mui-btn mui-btn-gray" id="tupian" onclick=galleryImgs()>➕</button>
			</label>
		</footer>

		<script src="../js/mui.min.js"></script>
		<script type="application/javascript" src="../js/app.js"></script>
		<script type="text/javascript">
			//(function($, doc) {
			var friendUserId;
			var friendNickname;
			var friendFaceImage;


			mui.plusReady(function() {

				//好友详情
				var openMenu = document.getElementById("openMenu");
				openMenu.addEventListener("tap", function() {
					mui.openWindow({
						url: "delete.html",
						extras: {
							friendUserId: friendUserId,
							friendNickname: friendNickname,

						}
					});
				});

				//获取我自己的用户信息
				var me = app.getUserGlobalInfo();
				//获取聊天页面的webview
				var chattingWebview = plus.webview.currentWebview();

				//设置聊天页面的软键盘样式
				chattingWebview.setStyle({
					softinputMode: "adjustResize"
				});

				//获取上一个页面传入的好友属性值
				friendUserId = chattingWebview.friendUserId;
				friendNickname = chattingWebview.friendNickname;
				friendFaceImage = chattingWebview.friendFaceImage;
				//设置聊天页面的标题栏好友昵称
				document.getElementById("chatting-nickname").innerHTML = friendNickname;
				//渲染初始化聊天记录
				initChatHistory();
				//获取聊天列表容器对象
				var areaMsgList = document.getElementById("msg");
				//设置聊天记录进入页面的时候自动滚动到最后一条
				areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
				//获取聊天发送内容文本框对象
				var msg_text = document.getElementById("msg-text");
				//获取发送消息按钮对象
				var send = document.getElementById("send");
				//监听用户输入，通过有无输入内容控制按钮的颜色
				msg_text.addEventListener("input", function() {
					//获取聊天发送内容
					var msg_text_content = msg_text.value;
					if (msg_text_content.length > 0) {
						send.setAttribute("class", "mui-btn-green");
					} else {
						send.setAttribute("class", "mui-btn-gray");
					}
				});

				//当软键盘弹出后，我们的聊天窗口会从原来的全屏调整为半屏，对当前的窗口监听resize事件
				window.addEventListener("resize", function() {
					//调整屏幕宽度
					resizeScreen();
					document.getElementById("msg-outter").style.paddingBottom = "50px";
				});
				//发送消息按钮的事件绑定
				send.addEventListener("tap", function() {
					/**
					 * 发送消息之前检测网络的状态
					 */
					//获取网络状态
					var connectionStatus = plus.networkinfo.getCurrentType();
					if (connectionStatus == 1 || connectionStatus == 0) {
						app.showToast("请打开网络连接......", "error");
						return;
					}
					//获取消息文本框的内容
					var msg_text_content = msg_text.value.replaceAll("'", "&#39;");
					//转义字符
					msg_text_content = msg_text_content.replaceAll("\"", "&quot;");
					msg_text_content = msg_text_content.replaceAll("\n", "<br/>");
					console.log(msg_text_content);

					if (msg_text_content.length == 0) {
						return;
					}

					//发送消息
					sendMsg(app.imgServerUrl + me.faceImage, msg_text_content);
					//清空消息文本框中的内容
					msg_text.value = "";
					//加载最新的位置
					areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
					//发送消息完毕之后，把发送按钮的颜色改为灰色
					send.setAttribute("class", "mui-btn-gray");
					//构建chatMsg
					var chatMsg = new app.ChatMsg(me.id, friendUserId, msg_text_content, null);
					//构建DataContent
					var dataContent = new app.DataContent(app.CHAT, chatMsg, null);

					//调用websocket 发送消息到netty后端
					var wsWebview = plus.webview.getWebviewById("bird-chatlist.html");
					wsWebview.evalJS("CHAT.chat('" + JSON.stringify(dataContent) + "')");
					//保存聊天历史记录到本地缓存中
					app.saveUserChatHistory(me.id, friendUserId, msg_text_content, 1);
					//保存聊天快照到本地缓存
					app.saveUserChatSnapshot(me.id, friendUserId, msg_text_content, true);
					//接受或回复消息
					//	receiveMsg("假装回复消息");
				})
			});

			//初始化用户聊天记录的函数
			function initChatHistory() {
				var msg_list = document.getElementById("msg");
				var me = app.getUserGlobalInfo();
				var myId = me.id;
				var myFaceImg = me.faceImage;
				var chatHistoryList = app.getUserChatHistory(myId, friendUserId);
				var chatHTML = "";
				var arr1 = [];
				var ss = app.imgServerUrl;
				for (var i = 0; i < chatHistoryList.length; i++) {
					var singleMsg = chatHistoryList[i];
					arr1[i] = chatHistoryList[i].msg;
					console.log(arr1[i]);

					if (singleMsg.flag == 1) {
						if (arr1[i].indexOf(ss) == -1) {
							chatHTML += '<div class="me_lists">' +
								'<div class="header_img">' +
								'<img src="' + app.imgServerUrl + myFaceImg + '" width="40px" height="40px" />' +
								'</div>' +
								'<div class="msg-wrapper left">' +
								'<p class="msg-right-green">' + singleMsg.msg + '</p>' +
								'</div>' +
								'</div>';
						} else if (arr1[i].indexOf(ss) == 0) {
							chatHTML += '<div class="me_lists">' +
								'<div class="header_img">' +
								'<img src="' + app.imgServerUrl + myFaceImg + '" width="40px" height="40px" />' +
								'</div>' +
								'<div class="msg-wrapper left">' +
								'<p class="msg-right-green">' + '<img src="' + singleMsg.msg +
								'" width="200px" height="200px" />' + '</p>' +
								'</div>' +
								'</div>';
						}
					} else {
						if (arr1[i].indexOf(ss) == -1) {
							chatHTML += '<div class="friend_lists">' +
								'<div class="header_img">' +
								'<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
								'</div>' +
								'<div class="msg-wrapper right">' +
								'<p class="msg-left-white">' + singleMsg.msg + '</p>' +
								'</div>' +
								'</div>';
						} else if (arr1[i].indexOf(ss) == 0) {
							chatHTML += '<div class="friend_lists">' +
								'<div class="header_img">' +
								'<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
								'</div>' +
								'<div class="msg-wrapper right">' +
								'<p class="msg-left-white">' + '<img src="' + singleMsg.msg +
								'" width=" width="200px" height="200px" /> ' + '</p>' +
								'</div>' +
								'</div>';
						}

					}
				}
				msg_list.innerHTML = chatHTML;
			}
			//发送图片
			function galleryImgs() {
				// 从相册中选择\图片
				console.log("从相册中选择图片:");
				plus.gallery.pick(function(path) {

						var canvas = document.createElement("canvas"); //创建canvas DOM元素
						var ctx = canvas.getContext("2d");
						var img = new Image;
						var dataURL;
						img.crossOrigin = 'Anonymous';
						img.src = path;
						img.onload = function() {
							canvas.height = 200; //指定画板的高度,自定义
							canvas.width = 200; //指定画板的宽度，自定义
							ctx.drawImage(img, 0, 0, 200, 200); //参数可自定义
							dataURL = canvas.toDataURL("image/" + "\.png");
							var user = app.getUserGlobalInfo();


							// 与后端联调
							mui.ajax(app.serverUrl + "/user/tupianFaceBase64", {
								data: {
									userId: user.id,
									faceData: dataURL
								},
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {

									var msg_text_content = app.imgServerUrl + data.data;
									console.log(msg_text_content);
									if (msg_text_content.length == 0) {
										return;
									}
									var me = app.getUserGlobalInfo();
									//发送消息
									sendMsg(app.imgServerUrl + me.faceImage, msg_text_content);
									//获取聊天列表容器对象
									var areaMsgList = document.getElementById("msg");
									//设置聊天记录进入页面的时候自动滚动到最后一条
									areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList
										.offsetHeight;
									//加载最新的位置
									areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList
										.offsetHeight;

									//构建chatMsg
									var chatMsg = new app.ChatMsg(me.id, friendUserId, msg_text_content,
										null);
									//构建DataContent
									var dataContent = new app.DataContent(app.CHAT, chatMsg, null);

									//调用websocket 发送消息到netty后端
									var wsWebview = plus.webview.getWebviewById("bird-chatlist.html");
									wsWebview
										.evalJS("CHAT.chat('" + JSON.stringify(dataContent) + "')");
									//保存聊天历史记录到本地缓存中
									app.saveUserChatHistory(me.id, friendUserId, msg_text_content, 1);
									//保存聊天快照到本地缓存
									app.saveUserChatSnapshot(me.id, friendUserId, msg_text_content, true);


								}
							})
						};
					},
					function(e) {
						console.log("取消选择图片");
					}, {
						filter: "image"
					});
			}

			//重新调整聊天窗口
			function resizeScreen() {
				//获取聊天列表容器对象
				var areaMsgList = document.getElementById("msg");
				//设置聊天记录进入页面的时候自动滚动到最后一条
				areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
			}
			//发送消息的函数
			function sendMsg(faceImg, msg) {
				var ss = app.imgServerUrl;
				var msgHtml;
				if (msg.indexOf(ss) == -1) {
					msgHtml = '<div class="me_lists">' +
						'<div class="header_img">' +
						'<img src="' + faceImg + '" width="40px" height="40px" />' +
						'</div>' +
						'<div class="msg-wrapper left">' +
						'<p class="msg-right-green">' + msg + '</p>' +
						'</div>' +
						'</div>';
				} else {
					msgHtml = '<div class="me_lists">' +
						'<div class="header_img">' +
						'<img src="' + faceImg + '" width="40px" height="40px" />' +
						'</div>' +
						'<div class="msg-wrapper left">' +
						'<p class="msg-right-green">' + '<img src="'  +msg +
						'" width="200px" height="200px" />' +
						'</p>' +
						'</div>' +
						'</div>';
				}
				var msg_list = document.getElementById("msg");
				msg_list.insertAdjacentHTML("beforeend", msgHtml);

				playSendMsgSound();
			}


			//接受消息的函数
			function receiveMsg(msg) {
				
				var msgHtml;
				var ss = app.imgServerUrl;

				if (msg.indexOf(ss) == -1) {
					msgHtml = '<div class="friend_lists">' +
						'<div class="header_img">' +
						'<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
						'</div>' +
						'<div class="msg-wrapper right">' +
						'<p class="msg-left-white">' + msg + '</p>' +
						'</div>' +
						'</div>';
				} else {
					msgHtml = '<div class="friend_lists">' +
						'<div class="header_img">' +
						'<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
						'</div>' +
						'<div class="msg-wrapper right">' +
						'<p class="msg-left-white">' + '<img src="' + msg +
						'" width="200px" height="200px" />' + '</p>' +
						'</div>' +
						'</div>';
				}

				var msg_list = document.getElementById("msg");
				msg_list.insertAdjacentHTML("beforeend", msgHtml);


				playReceiveMsgSound();
			}


			//播放发送消息的铃声
			function playSendMsgSound() {
				//获取音频播放对象
				var audioPlayer = plus.audio.createPlayer("../mp3/send.mp3");
				audioPlayer.play();
			}
			//播放消息接受的铃声
			function playReceiveMsgSound() {
				//获取音频播放对象
				var audioPlayer = plus.audio.createPlayer("../mp3/send.mp3");
				audioPlayer.play();
			}
			//	}(mui, document));
		</script>
	</body>

</html>
